<template>
  <view class="wrapper">
		<u-navbar :is-back="false" title="基本信息" :is-fixed="true" title-color="#000" :border-bottom="false"></u-navbar>
    <div id="informationId">
			<div class="pd_l_30 pd_r_30 bg-fff pd_t_50 pd_b_45">
				<div class="font-28 font-b col-333 pd_b_10">请填写您的基本信息</div>
				<div class="font-24 col-333">请完整如实填报以下信息，以获取您的新高考学业规划方案</div>
			</div>
			<div class="pd_l_30 pd_r_30 bg-fff mg_t_10">
				<div class="row cont-center font-26 bg-fff yh_bd_bottom pd_t_50 pd_b_45">
					<div class="col-333 flex-1">姓名</div>
					<input type="text" class="text-right" v-model="nameInfo" value="" placeholder="请填写中文姓名" />
				</div>
				<div class="row cont-center font-26 bg-fff yh_bd_bottom pd_t_50 pd_b_45">
					<div class="col-333">出生日期</div>
          <picker mode="date" :value="age" @change="bindDateChange" class="text-right col-999 flex-1">
            <view class="text-right">{{age || '请选择'}}</view>
          </picker>
				</div>
				<div class="row cont-center font-26 bg-fff yh_bd_bottom pd_t_50 pd_b_45">
					<div class="col-333 flex-1">学校</div>
					<input type="text" class="text-right" v-model="schoolInfo" value="" placeholder="请输入" />
				</div>
				<div class="row cont-center font-26 bg-fff yh_bd_bottom pd_t_50 pd_b_45">
					<div class="col-333">年级</div>
          <view @click="bankShow = true" class="text-right col-999 flex-1">{{classNum || '请选择'}}</view>
            <u-select v-model="bankShow"
                      mode="single-column"
                      label-name="name"
                      value-name="id"
                      :list="classState" @confirm="actionSheetCallback"></u-select>
				</div>
			</div>
			<div class="pd_l_30 pd_r_30 bg-fff pd_t_50 pd_b_45 mg_t_20">
				<div class="font-28 font-b col-333 pd_b_10">请填写您的电子邮箱</div>
				<div class="font-24 col-1f476d">邮箱地址将作为您的唯一测评账号，一经保存，无法修改</div>
				<input style="width: 100%;margin-top: 30upx" type="text" class="font-26" v-model="mailboxInfo" value="" placeholder="请输入" />
			</div>
			<div class="user-btn text-cent col-fff font-30 bg-1f476d">
        <u-button type="primary" :custom-style="customStyle" shape="circle" @click="setBaseInfo">保存</u-button>
      </div>
		</div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST, CHECK_EMAIL} from "../../util/util";

  export default {
    data() {
      return {
        classState: [],
				classNum: '',
				age: '',
				nameInfo: '',
				mailboxInfo: '',
				schoolInfo: '',
				subjects: [],
				classId: '',
        customStyle: {
					background: '#1f476d',
					padding: '0 30rpx'
				},
        bankShow: false,
        kemuList: []
      }
    },

    mounted() {
      this.getClassSubjectInfo()
    },

    methods: {
      setBaseInfo() {
        var that_ = this;
        that_.nameInfo = that_.nameInfo.replace(/[^\u4E00-\u9FA5]/g, '')
        if (that_.nameInfo.length < 2 || that_.nameInfo.length > 6) {
          TOAST('请填写2~6位中文姓名');
          return false;
        }
        if (!that_.age) {
          TOAST('请选择出生日期');
          return false;
        }
        if (!that_.schoolInfo) {
          TOAST('请填写学校');
          return false;
        }
        if (!that_.classNum) {
          TOAST('请选择年级');
          return false;
        }
        if (!that_.mailboxInfo || !CHECK_EMAIL(that_.mailboxInfo)) {
          TOAST('请正确填写email邮箱');
          return false;
        }
        request({
          url: '/app/base/setBaseInfo',
          method: 'post',
          data: {
            "nickName": that_.nameInfo,
            "birthday": that_.age,
            "school": that_.schoolInfo,
            "className": that_.classNum,
            "email": that_.mailboxInfo,
            "classId": that_.classId
          }
        }).then(ret => {
          setTimeout(() => {
            uni.$emit('new_login_params', {
              params: {
                kemuList: that_.kemuList,
                schoolName: that_.schoolInfo,
                className: that_.classNum,
                classId: that_.classId
              }
            })
          }, 300)
          this.$u.route({
            url: '/pages/login/new_achievement'
          })
        })
      },

      getClassSubjectInfo() {
        var that_ = this;
        request({
          url: '/app/base/getClassSubjectInfo'
        }).then(ret => {
          that_.classState = ret.data;
        })
      },

      actionSheetCallback(res) {
        this.classNum = res[0].label
        var subject = this.classState.filter(item=>item.name == res[0].label)[0]
        this.classId = subject.id
        var subjects = subject.subjects
        var arr = []
        subjects.forEach(item => {
        	let obj = {
        		name: item
          }
          arr.push(obj)
        })
        this.kemuList = arr
      },

      bindDateChange(res) {
        this.age = res.detail.value
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    background: #f7f7f7;
    height: 100%;
    .text-right {
      text-align: right;
    }
    .user-btn {
      width: 90%;
      margin-left: 5%;
      margin-top: 50upx;
    }
  }
</style>
